<template>
	<view class="near">
		<u-navbar id="tabbars" :is-back="false" :border-bottom="false" back-icon-color="#fff" title="我的订单"
			title-size="36" title-color="#fff" :background="background">

			<view @click="goback" class="slot-wrap">
				<image  class="back" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/21.png"
					mode=""></image>
			</view>
		</u-navbar>

		<view :style="{'top': totalHeight+'px'}" class="decoration">
			<image class="imgs" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/c1.png" mode=""></image>
			<!-- <view style="margin: 0 27rpx; background: #EDF6FF;">
				<u-search :show-action="true" bg-color="#fff" shape="square" @search="search" @custom="search"
					placeholder="请输入关键字" v-model="keyword"></u-search>
			</view> -->
		</view>


		<view class="content">
			<!-- <image :style="{'top': totalHeight+'px'}" class="deco" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/14.png" mode="widthFix"></image> -->
			<view class="info">
				<view style="padding-top: 15px;" class="list" v-if="list1.length">
					<view v-for="item in list1" class="item">
						<!-- <view class="status">
							<text class="doing" v-if="item.pay_state=='已支付'">{{item.pay_state}}</text>
							<text class="notpay" v-else-if="item.pay_state=='未支付'">{{item.pay_state}}</text>
							<text v-else>{{item.pay_state}}</text>
						</view> -->
						<!-- <view class="orderNum">
							订单号:
							{{item.ord_no}}
						</view> -->
						<view class="iteminner">
							<!-- <img class="img" :src="item.device_icon_url" alt=""> -->
							<view class="detail">
								<view class="name">
									<view class="left">
										{{item.shop_name}}{{item.device_name}}
									</view>
									<view class="right">
										{{item.ord_price}}
										<text class="unit">元</text>
									</view>
								</view>

								<view class="details">
									<view :key="index1" v-for="(inner,index1) in item.orderDetail" class="wraps">
										<view class="items">
											<view class="left">
												<view>租借时间：{{inner.start_time}}</view>
												<!-- <view>结束时间：{{inner.add_time}}</view> -->
												<view v-if="inner.finish_state!='租借中'">使用时长：{{formatTime(inner.minutes)}}</view>
											
												<view>租借地点：{{item.device_address}}</view>
											</view>
											<view class="right">
												<view class="monty">
													￥{{inner.pay_price}}
												</view>
												<view class="num">
													x 1
												</view>
											</view>
										</view>
										<view class="bot">
											<view class="left">
												<view v-if="inner.finish_state!='租借中'" class="">
												<text>应扣费用:{{inner.kouchu_price>0?'-':''}}{{inner.kouchu_price}}</text> 
												<text> 已退押金：<text style="color:#FF772B;">{{inner.refund_price>0?'+':''}}{{inner.refund_price}}</text> </text>
												</view>
											</view>
											<view class="statusFlag">
											{{inner.finish_state}}
											</view>
										</view>
									</view>
								</view>
								<!-- <view class="mid">
									<view class="addr">
										{{item.create_time}}
									</view>

									<view class="total">
										共{{item.buy_num}}个
									</view>

								</view> -->

							</view>

						</view>

						<!-- <view class="bottoms">
							<view class="left">
								<text v-if="item.online_state=='在线'"
									style="color: #08B878;">{{item.online_state}}</text>
								<text v-else style="color: #999999;">{{item.online_state}}</text>
							</view>
							<view class="right">
								<view class="same1">
									<text>查看</text>
								</view>
								<view class="same2">
									<text>去支付</text>
								</view>

							</view>
						</view> -->
					</view>
					<uni-load-more :status="status"></uni-load-more>
				</view>
				<view v-else class="empty" style="padding-top: 150px;">
					<view v-if="!list1.length && senDate" class="emptyAddress-box">
						<u-empty text="暂无数据" mode="news"></u-empty>
					</view>
				</view>



			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				totalHeight: 0, //总高度  
				background: {

					background: 'url(https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/9.png) no-repeat',
					// 还可以设置背景图size属性
					backgroundSize: 'cover',
					// 渐变色
					// backgroundImage: 'linear-gradient(180deg, #417CF4 0%, #84ACFF 100%)'
				},
				total: null, //总共多少条数据
				formData: {
					pageSize: 15, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],
			}
		},
		onReady() {
			uni.hideTabBar();
			uni.createSelectorQuery().select('#tabbars').boundingClientRect((rect) => {
				console.log(rect.height)
				this.totalHeight = rect.height
			}).exec()
		},

		onLoad() {
			this.getlist()
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;

				this.getlist();

			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		methods: {
			
			 formatTime(minutes) {
			  var days = Math.floor(minutes / 1440);
			  var hours = Math.floor((minutes % 1440) / 60);
			  var mins = minutes % 60;
			
			  var formattedTime = '';
			  if (days > 0) {
			    formattedTime += days + '天 ';
			  }
			  if (hours > 0) {
				  formattedTime += hours.toString() + '时 ';
			    // formattedTime += hours.toString().padStart(2, '0') + '时 ';
			  }
			  // formattedTime += mins.toString().padStart(2, '0') + '分';
			   formattedTime += mins.toString() + '分';
			
			  return formattedTime;
			},

			goback() {
				uni.navigateBack()
			},

			search() {
				this.formData.page = 1
				this.list1 = []
				this.getlist()
			},
			getlist() {
				this.senDate = false;
				this.$u.api.myOrder({
						page: this.formData.page,
						limit: this.formData.pageSize,
						// longitude: this.vuex_Long,
						// latitude: this.vuex_Lat,
						key: this.keyword,
					})
					.then((res) => {

						this.senDate = true;
						if (res.code == 0) {

							console.log(res.data, 666666);
							this.total = res.data.total;
							const newlist = res.data.list;
							this.list1.push(...newlist);

							console.log(this.list1, 455333);

							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							console.log("请求数据失败");
						}
					});
			}
		},
	}
</script>


<style>
	page {
		background: #EDF6FF;
	}
</style>
<style scoped lang="scss">
	.notonline {
		border: 2rpx solid #B6B6B6;
	}

	.online {
		border: 2rpx solid #4891FF;
	}

	.distance {
		font-size: 11px;
		color: #999;
		margin-top: -4px;
	}

	.status {
		position: absolute;
		right: 0;
		top: 0;
		width: 129rpx;
		height: 43rpx;

		text {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 129rpx;
			height: 43rpx;
			background-color: #fdf6ec;
			color: #f90;
			font-size: 12px;
			border-radius: 0 0 0 32rpx;

			&.doing {
				background-color: #dbf1e1;
				color: #19be6b;
			}

			&.notpay {

				// background: #A5E9FF;
				// color: #129AC6;
				background-color: #fef0f0;
				color: #fa3534;
			}
		}
	}

	.slot-wrap {
		position: relative;
		z-index: 99999;
		width: 90px;
		height: 40px;
		// background: red;
		display: flex;
		align-items: center;
	}

	.decoration {
		width: 100%;
		height: 35rpx;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 88;

		.imgs {
			width: 100%;
			height: 35rpx;
			display: block;
		}
	}

	.back {
		width: 30rpx;
		height: 46rpx;
		margin-left: 40rpx;
	}

	.content {

		position: relative;

		.deco {
			width: 100%;
			height: 35rpx;
			position: fixed;
			left: 0;
			right: 0;
			z-index: 88;

			.imgs {
				width: 100%;
				height: 35rpx;
				display: block;
			}
		}

		.info {
			margin: 0 27rpx;
			min-height: calc(100vh - 50px);

			.list {
				padding-top: 16px;

				.item {
					position: relative;
					padding: 38rpx 20rpx 36rpx 36rpx;
					background: #FFFFFF;
					border-radius: 11rpx 11rpx 11rpx 11rpx;
					margin-bottom: 32rpx;
				}

				.bottoms {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						width: 144rpx !important;
						text-align: center;
						font-size: 24rpx;
						color: #a4a4a4;
						margin-right: 29rpx;
					}

					.right {
						flex: 1;
						display: flex;
						// align-items: center;
						justify-content: flex-end;

						.same2 {



							width: 150rpx;
							height: 60rpx;
							background: linear-gradient(180deg, #08B878 0%, #8EDE8D 100%);
							box-shadow: 0px 8px 9px 0px rgba(20, 198, 48, 0.23);
							border-radius: 76px 76px 76px 76px;
							opacity: 1;

							display: flex;
							align-items: center;
							justify-content: center;

							text {
								font-size: 27rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #fff;

							}
						}

						.same1 {
							margin-right: 15px;
							width: 150rpx;
							height: 60rpx;
							background: linear-gradient(180deg, #E98121 0%, #E9AA4C 100%);
							box-shadow: 0px 8px 9px 0px rgba(198, 126, 20, 0.23);
							border-radius: 76px 76px 76px 76px;
							opacity: 1;
							display: flex;
							align-items: center;
							justify-content: center;

							text {
								font-size: 27rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #fff;

							}
						}
					}
				}

				.orderNum {
					font-size: 13px;
					color: #666;
					margin-bottom: 16rpx;
				}

				.iteminner {

					// overflow: hidden;
					display: flex;

					.img {
						width: 120rpx !important;
						height: 120rpx !important;
						border-radius: 11rpx 11rpx 11rpx 11rpx;
						margin-right: 29rpx;
					}

					.detail {
						width: 500rpx;
						flex: 1;

						.name {

							display: flex;
							// align-items: center;
							justify-content: space-between;
							border-bottom: 1rpx solid #e7e7e7;
							padding-bottom: 15rpx;

							.left {
								font-size: 32rpx;
								color: #333;
								flex:1;
								margin-right: 10px;
								// margin-top: -25rpx;
							}

							.right {
								margin-top: -8px;
								font-size: 50rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #FF772B;

								.unit {
									font-size: 22rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 500;
									color: #FF772A;
									line-height: 26rpx;
								}
							}
						}


						.mid {
							padding: 10rpx 0 0 0;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 12px;

							.addr {
								color: #666;

								text {
									margin-right: 5px;
									padding: 0 4px;
									border: 1rpx solid #ececec;
									border-radius: 3px;
									margin-right: 5px;
									font-size: 12px;
								}
							}

							.total {
								color: #999;
							}

						}
					}

				}
			}
		}
	}

	.details {
		.wraps{
			border-bottom: 1rpx solid #eeeeee;
			padding: 0 0  15px 0;
			&:last-child{
				border-bottom: none;
				padding-bottom: 0;
			}
		}
		.items {
			display: flex;
			justify-content: space-between;
			font-size: 13px;
			color: #666;
			padding: 10px 0 5px ;

			.left>view {
				margin-bottom: 5px;
			}

			.right {
				.monty {
					// font-weight: bold;
					font-size: 30rpx;
					color: #666;
				}

				.num {
					text-align: right;
					color: #999;
					margin-top: 10rpx;
				}
			}
		}
		.bot{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			text{
				&:first-child{
					margin-right: 13px;
				}
				
			}
		}
	}
</style>
